<script setup>
import { merchantGetBasicService } from '@/api/merchant';
import { productDeleteMerchantProductService, productGetMerchantProductService } from '@/api/product';
import {
  Back,
  Plus,
  Search
} from '@element-plus/icons-vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter();

onMounted(() => {
  document.documentElement.classList.remove('dark');
})
onUnmounted(() => {
  document.documentElement.classList.add('dark');
})

/* 编辑店铺基本信息 */
const editProfileVisible = ref(false);


// 模拟店铺数据
const merchantInfo = ref({
  name: '潮流时尚馆',
  avatarUrl: 'https://via.placeholder.com/80',
  contactPhone: '138-1234-5678',
  certification: 'certified',
  sales: 28450,
  goodsCount: 128
})

const getMerchantBasicInfo = async () => {
  const res = await merchantGetBasicService();
  merchantInfo.value = res.data.data;
}
getMerchantBasicInfo();

// 模拟商品数据
const goodsList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)

const getGoodsList = async () => {
  const res = await productGetMerchantProductService();
  goodsList.value.push(...res.data.data);
}
getGoodsList();

// 状态标签颜色映射
const statusTag = {
  PENDING: { type: 'warning', text: '待审核' },
  APPROVED: { type: 'success', text: '已批准' },
  REJECTED: { type: 'danger', text: '已拒绝' },
  ONSALE: { type: 'success', text: '销售中' },
  OFFSHELF: { type: 'info', text: '已下架' }
};

// 删除商品
const onDeleteProduct = async (productId) => {
  await productDeleteMerchantProductService(productId);
}

</script>

<template>
  <div class="shop-manage-container">
    <!-- 头部导航 -->
    <div class="header">
      <el-icon style="font-size: 25px; color: black; cursor: pointer;" @click="router.back()"><Back /></el-icon>
      <h1>店铺管理</h1>
    </div>

    <!-- 店铺信息概览 -->
    <el-row :gutter="20" class="overview" @click="editProfileVisible = true">
      <el-col :span="6">
        <el-card class="info-card">
          <div class="shop-info">
            <el-avatar :size="80" :src="merchantInfo.avatarUrl" />
            <div class="shop-meta">
              <h2>{{ merchantInfo.name }}</h2>
              <el-tag 
                :type="merchantInfo.certification === 'certified' ? 'success' : 'warning'"
                effect="dark"
              >
                {{ merchantInfo.certification === 'certified' ? '已认证' : '未认证' }}
              </el-tag>
              <p class="contact">{{ merchantInfo.contactPhone }}</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 数据卡片 -->
      <el-col :span="6" v-for="(item, index) in [
        { title: '商品总数', value: merchantInfo.goodsCount, unit: '件' },
        { title: '今日销量', value: 328, unit: '单' },
        { title: '总销售额', value: merchantInfo.sales, unit: '元' }
      ]" :key="index">
        <el-card class="data-card">
          <h3>{{ item.title }}</h3>
          <div class="data-value">
            <span class="number">{{ item.value }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 商品管理 -->
    <el-card class="goods-manage">
      <div class="toolbar">
        <el-button type="primary" :icon="Plus" @click="router.push('/merchant/product/edit')">添加商品</el-button>
        <el-input 
          placeholder="搜索商品名称..." 
          style="width: 300px" 
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>

      <el-table :data="goodsList" stripe style="width: 100%">
        <el-table-column prop="title" label="商品名称" width="300" />
        <!-- <el-table-column prop="category" label="商品分类" /> -->
        <el-table-column label="价格">
          <template #default="{ row }">¥{{ row.price.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" />
        <el-table-column prop="salesVolume" label="销量" />
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-tag :type="statusTag[row.status].type">
              {{ statusTag[row.status].text }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" @click="router.push(`/merchant/product/edit?id=${ row.productId }`)">编辑</el-button>
            <el-button size="small" type="danger" @click="onDeleteProduct(row.productId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          :total="goodsList.length"
        />
      </div>
    </el-card>

    <el-dialog title="编辑资料" v-model="editProfileVisible">
      <el-container class="edit-profile-container">
        <el-header class="edit-profile-header">
          <el-upload class="edit-profile-user-avatar-warpper" :http-request="uploadAvatar" :accept="allowedAvatarFileTypes" :before-upload="beforeUploadAvatar">
            <el-avatar class="edit-profile-user-avatar" :src="userStore.userBasicInfo?.avatarUrl" :icon="UserFilled" fit="fill"></el-avatar>
          </el-upload>
        </el-header>

        <el-main class="edit-profile-main">
          <el-form label-position="top">
            <el-form-item label="名字">
              <el-input v-model="profileModel.name"></el-input>
            </el-form-item>
            <el-form-item label="简介">
              <el-input v-model="profileModel.bio" :input-style="editBioTextareaStyle" resize="none" type="textarea"></el-input>
            </el-form-item>
          </el-form>
        </el-main>

        <el-footer>
          <el-button type="danger" @click="onSave">保存</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.shop-manage-container {
  padding: 24px;
  background-color: #f5f7fa;

  .header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;

    h1 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .overview {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .info-card {
      .shop-info {
        display: flex;
        align-items: center;
        gap: 20px;

        .shop-meta {
          h2 {
            margin: 0 0 8px;
            font-size: 18px;
          }

          .contact {
            margin: 8px 0 0;
            color: #909399;
          }
        }
      }
    }

    .data-card {
      h3 {
        margin: 0 0 12px;
        color: #606266;
        font-size: 14px;
      }

      .data-value {
        display: flex;
        align-items: baseline;
        gap: 8px;

        .number {
          font-size: 24px;
          font-weight: 600;
          color: #303133;
        }

        .unit {
          color: #909399;
        }
      }
    }
  }

  .goods-manage {
    .toolbar {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}

// 卡片悬停动画
.el-card {
  transition: transform 0.3s, box-shadow 0.3s;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
}

.edit-profile-container {

  .edit-profile-header {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    .edit-profile-user-avatar-warpper {
      height: 100%;
      width: auto;
      aspect-ratio: 1/1;

      ::v-deep(.el-upload) {
        height: 100%;
        width: 100%;
        .edit-profile-user-avatar {
          height: 100%;
          width: 100%;
        }
      }
    }
  }

  .edit-profile-main {

  }
}
</style>